<template>
	<!-- 整体大布局 -->
	<div class="icons swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item,index) in result">
				<div class="icons-item" v-for="txt in item" :key="txt.id">
					<img :src="txt.imgURL"/>
					<p>{{txt.til}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Swiper from 'swiper'
	export default{
		props:['iconlist'],//接收父组件传递的数组
		data(){
			return{
				
			}
		},
		updated(){
			new Swiper('.icons',{
				//重复轮播
				loop:true,
				observer:true,
				observeParents:true
			})
		},
		//计算属性
		computed:{
			result(){
				//1.设置一个空数组【一维数组】
				var arr=[];
				//2.forEach遍历：item:数组元素：index:下标
				this.iconlist.forEach((item,index)=>{
					//计算index下标/	8的向下取整结果
					var idx=Math.floor(index/8);
					//判断计算结果相应的数组是否存在内容，如果没有声明一个空数组
					//[针对第一次循环，声明下标0和1分别是个数组]
					if(!arr[idx]){
						arr[idx]=[];
					}
					//将每次循环的元素item，添加到当前合适的下标数组内
					arr[idx].push(item);
				})
				return arr;
			}
		}
		
	}
</script>

<style scoped >
	.icons{
		width: 100%;
		overflow: hidden;
		padding-top: 0.2rem;
		background-color: white;
	}
	.icons-item{
/* 		background-color: #DCDCDC; */
		width: 25%;
		padding-bottom: 25%;
		height: 0;
		float: left;
	}
	.icons-item img{
		width: 1.1rem;	/* 55px */
		height: 1.1rem;
		display: block;
		margin: 0 auto;
	}
	.icons-item p{
		font-size: 0.32rem;
		text-align: center;
		color: #212121;
		margin-top: 0.2rem;
	}
</style>
